<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="sex" label="性别">
                <template #default="props">
                    <span>{{proxy.$utils.findObj(props.row.sex,globalData.sexAry,'value').text}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column prop="edu" label="学历">
                <template #default="props">
                    <span>{{props.row.edu?proxy.$utils.findObj(props.row.edu,globalData.eduList,'value').text:'--'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
                <template #default="props">
                    <!-- <span class="pointer mr10 base-color" @click="sendinterview(props.row)">邀请面试</span> -->
                    <span class="pointer mr10 base-color" @click="editData(props.row,3)">查看简历</span>
                    <!-- <span class="pointer base-color" @click="persionsave(props.row.persion_id)">收藏</span> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span v-if="isEdit==3">人才简历</span>
            <el-select class="ml20 mr10" v-model="applyForm.job_id" placeholder="请选择职位" clearable @change="typeChange">
                <el-option v-for="item in recruitList" :key="item.job_id" :label="item.name" :value="item.job_id">
                </el-option>
            </el-select>
            <el-button type="primary" plain :loading="false" @click.prevent="sendinterview()">邀请面试</el-button>
        </div>
        <div class="form-box">
            <div v-if="isEdit==3" class="">
                <div class="resume-box pd20">
                    <div class="resume pd30">
                        <div class="head-title weight ml20 mb20">{{form.name||""}}</div>
                        <div class="base-data mini-gray-bg pd20 mb30">
                            <span class="inline-b w30">性别：{{proxy.$utils.findObj(form.sex,globalData.sexAry,'value').text}}</span><span class="inline-b w30">出生年月：{{form.birthday}}</span><br/>
                            <span class="inline-b w30">电话：{{form.mobile}}</span><span class="inline-b w30">名族：{{proxy.$utils.findObj(form.nation,globalData.nationList,'value').text}}</span><br/>
                            <div class="head-box"><el-image class="head" @click="editData(v)" fit="cover" :src="form.head?proxy.$setting.globalUrl.fileurl+'/head/'+form.head:''">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image></div>
                        </div>
                        <div class="" style="margin-top:60px;">
                            <div class="label base-color large-size weight ml20 mb10">个人优势</div>
                            <div class="line-w"></div>
                            <div>
                                <div class="base-data pd20-row pd10-column mb30 base-gray-color">
                                    <span class="inline-b w100" style="text-align: justify;">{{form.specialty}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt30">
                            <div class="label base-color large-size weight ml20 mb10">求职意向</div>
                            <div class="line-w"></div>
                            <div>
                                <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.objective" :key="i">
                                    <span class="inline-b w50">期望职位：{{v.job}}</span><span class="inline-b w50">薪资要求：{{v.salary*10}}K</span><br/>
                                    <span class="inline-b w50">求职类型：{{v.type?'兼职':'全职'}}</span><span class="inline-b w50">期望行业：{{proxy.$utils.findObj(v.industry,globalData.industryList,'value').text}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt30">
                            <div class="label base-color large-size weight ml20 mb10">教育经历</div>
                            <div class="line-w"></div>
                            <div>
                                <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.edus" :key="i">
                                    <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.school}}</span><br/>
                                    <span class="inline-b w100 mb10">{{v.major}} | {{proxy.$utils.findObj(v.edu,globalData.eduList,'value').text}}</span><br/>
                                     <span class="inline-b w100">{{v.experience}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt30">
                            <div class="label base-color large-size weight ml20 mb10">工作经历</div>
                            <div class="line-w"></div>
                            <div>
                                <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.works" :key="i">
                                    <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.companyname}}</span><br/>
                                    <span class="inline-f ju-flex-start w50 mb10">{{v.jobname}} | {{proxy.$utils.findObj(v.industry,globalData.industryList,'value').text}}</span><br/>
                                    <span class="inline-b w100 mb10">工作内容：{{v.jobdetail}}</span>
                                    <span class="inline-b w100">业绩：{{v.achievement}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt30">
                            <div class="label base-color large-size weight ml20 mb10">项目经历</div>
                            <div class="line-w"></div>
                            <div>
                                <div class="base-data pd20-row pd10-column mb30 base-gray-color" v-for="(v,i) in form.projects" :key="i">
                                    <span class="inline-f ju-flex-start w50 base-color mb10">{{v.start}} ～ {{v.end}}</span><span class="inline-f ju-flex-end w50 base-color text-align-end">{{v.name}}</span><br/>
                                    <span class="inline-f ju-flex-start w50 mb10">{{v.role}}</span><br/>
                                    <span class="inline-b w100 mb10">项目描述：{{v.msg}}</span>
                                    <span class="inline-b w100">项目业绩：{{v.achievement}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete } from '@element-plus/icons-vue'

    let { proxy } = getCurrentInstance()
    let obj = reactive({
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            currentpage: 1,
            pagesize: 10
        },
        form: {},
        recruitList: [],
        applyForm:{
            "job_id": "",
            "persion_id": ""
        }
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'persion/save/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const getrecruit = (form)=>{
        proxy.$ajax({url: 'recruit/list',data: {},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                recruitList.value = d.msg.list;
            }else{}
        }).catch(e => {
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    const typeChange = (e,key)=>{
        console.log(key);
        if(key=='salary'||key=='workyear'){
            sifterForm.value[`${key}_start`] = e?e[0]:''
            sifterForm.value[`${key}_end`] = e?e[1]:''
            updalist(obj.sifterForm)
        }else{
            sifterForm.value[key] = e||''
            updalist(obj.sifterForm)
        }
    }

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item,isEditidx)=>{
        // return
        applyForm.value.persion_id = item.persion_id;
        proxy.$ajax({url: 'persion/get',data:{persion_id:item.persion_id},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                form.value = {
                    ...d.msg,
                    persion_id: item.persion_id
                }
                isEdit.value = isEditidx
                getrecruit()
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    // 邀请面试
    const sendinterview = ()=>{
        if(!applyForm.value.job_id){
            proxy.elMessageMixin('请选择职位', 'error')
            return
        }
        proxy.$ajax({url: 'persion/apply',data:applyForm.value,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                proxy.elMessageMixin('邀请成功！', 'success')
            }else{proxy.elMessageMixin(date.err, 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    const persionsave = (id)=>{
        proxy.$ajax({url: 'persion/save',data:{persion_id:id},bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                proxy.elMessageMixin('收藏成功！', 'success')
            }else{proxy.elMessageMixin(date.err, 'error')}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }

    let { list, sifterForm, isEdit, total, form, recruitList, applyForm } = toRefs(obj)
</script>

<style lang="scss" scoped>
    .resume-box{
        background: #f0f0f0;
        .resume{
            background: #fff;
        }
        .head-title{font-size: 36px;}
        .base-data{
            position: relative;
        }
        .head-box{
            position: absolute;right: 50px;top: 50%;margin-top: -100px;width: 150px;height: 200px;background: #fff;box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.03);
            .head{width: 150px;height: 200px;}
        }
        .label{
            font-size: 20px;
        }
    }
</style>